<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>新增</title>
  <link rel="stylesheet" href="../../static/css/bootstrap.4.3.1.min.js.css" th:href="@{/css/bootstrap.4.3.1.min.js.css}"/>
  <script th:src="@{/js/jquery-3.4.1.js}"></script>
  <link rel="stylesheet" href="../../static/css/layui.css" th:href="@{/css/layui.css}"/>
  <script th:src="@{/js/layui.js}"></script>
  <script th:src="@{/js/modules/layer.js}"></script>
  <style>
    li{
      list-style: none;
      margin: 15px;
    }
    .btn-block{
      width: 380px !important;
      margin: 0px 55px !important;
    }
  </style>
</head>
<body>
<div class="container">
  <h3 style="text-align: center">新增住户信息</h3>
  <form >
    <ul>
      <li>
        <input class="form-control is-required" type="text" th:value="${username}" name="username" placeholder="请输入用户名">
      </li>
      <li>
        <input class="form-control" type="text" th:value="${pwd}" name="pwd" placeholder="请输入密码">
      </li>
      <li>
        <input class="form-control" type="text" th:value="${houseNumber}" name="houseNumber" placeholder="请输入门牌号">
      </li>
      <li>
<!--        <input class="form-control" type="text" th:value="${waterConsumption}" name="waterConsumption" placeholder="请输入用水量/吨">-->
        <input name="waterConsumption" type="hidden" value="0">


      </li>
      <li>
<!--        <input class="form-control" type="text" th:value="${powerConsumption}" name="powerConsumption" placeholder="请输入用电量/度">-->
        <input name="powerConsumption" type="hidden" value="0">
      </li>
      <li>
        <input class="form-control" type="text" th:value="${waterPrice}" name="waterPrice" placeholder="请输入水价（元/吨）">
      </li>
      <li>
        <input class="form-control" type="text" th:value="${electricityPrice}" name="electricityPrice" placeholder="请输入电价（元/度）">
      </li>
      <li>
        <!--        <input class="form-control" type="text" th:value="${powerConsumption}" name="powerConsumption" placeholder="请输入用电量/度">-->
        <input name="cost" type="hidden" value="0">
      </li>
      <li>
        <input class="form-control" type="text" th:value="${state}" name="state" placeholder="请输入状态（0-管理员 1-用户）">
      </li>
    </ul>
    <button class="btn btn-primary btn-lg btn-block" onclick="click123()">保存</button>
  </form>
</div>
<script>
  //点击保存按钮，ajax前后交互传递数据
  function click123(){
    debugger
    var username=$("input[name='username']").val();
    var pwd=$("input[name='pwd']").val();
    var houseNumber=$("input[name='houseNumber']").val();
    var waterConsumption=$("input[name='waterConsumption']").val()|| "0";
    var powerConsumption=$("input[name='powerConsumption']").val()|| "0";
    var waterPrice=$("input[name='waterPrice']").val();
    var electricityPrice=$("input[name='electricityPrice']").val();
    var totalPrice=$("input[name='totalPrice']").val()|| "0";
    var state=$("input[name='state']").val();
    if(username==""){//前端判断用户名、密码是否为空
        alert("用户名为空，请重新输入！")
    }else if(pwd==""){
      alert("密码为空，请重新输入！")
    }else if(state==""){
      alert("用户身份为空，请核对后重新输入！")
    }else {
      $.ajax({
        url: '/insertUser1',//后台接口地址
        type:'get',//请求方式，一般为get、post
        dataType:'text',//表示返回的数据必s须为' '中填写的类型，否则：会走下面error对应的方法。 ajax返回：json、xml、html、text、script、jsonp这几种类型
        cache:false,
        async:false,
        data:{
          username:username,
          pwd:pwd,
          houseNumber:houseNumber,
          waterConsumption:waterConsumption|| "0",
          powerConsumption:powerConsumption|| "0",
          waterPrice:waterPrice,
          electricityPrice:electricityPrice,
          totalPrice:totalPrice|| "0",
          state:state
        },
        success:function (data) {
          debugger
          console.log(data.msg)
          // parent.layui.table.reload("yxy123");//刷新表格
          debugger
          if(data== "0"){
            alert("新增成功")
          }else{
            alert("新增失败")
          }
          debugger
          // var index = parent.layer.getFrameIndex(window.name);//获取弹窗索引
          // parent.layer.close(index);//关闭弹窗

          parent.layer.closeAll();//关闭所有的弹窗
          // parent.layui.table.reload("yxy123");//刷新表格
          parent.location.reload();
        },
        error:function () {
          alert("请求失败")
        }
      })
    }

  }
</script>
</body>
</html>